<template>
  <div class="container assetInfo-form">
    <div v-show="!isPrint" ref="scrollDiv" style="flex: 1; height: 100%; padding: 0 0 90px 0" class="dark-top">
      <!-- 基本信息 -->
      <div class="c-box noprint">
        <!-- 标题 -->
        <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
          <!-- <i class="el-icon-back" @click="$router.go(-1)" /> -->
          <div style="font-size: 16px; font-weight: 500">基本信息</div>

          <div style="display: flex; justify-content: flex-start; align-items: center">
            <!-- <div class="switch">
              <el-switch v-model="openSwitch" @change="changeSwitch" />
                <span style="font-size: 16px; margin: 5px">固定</span>
                <el-input-number
                  v-model="inputSwitch"
                  :disabled="openSwitch"
                  size="mini"
                  style="width: 80px"
                  controls-position="right"
                  :min="1"
                  :max="4" />
                <span style="font-size: 16px; margin: 5px">行</span>
            </div> -->
            <el-checkbox v-model="checked" @change="changeShow">仅展示必填信息</el-checkbox>
          </div>
        </div>
        <!-- 表单 -->
        <div style="display: flex; height: 100%">
          <div style="width: 70%; height: 100%" class="asset-detail-form">
            <!-- :is-place="title === '详情'" -->
            <hk-form
              ref="formRef"
              :top="top"
              :is-fixed="true"
              class="hk-flex"
              :data="formData"
              :rules="rules"
              label-position="right"
              label-width="120"
              :btn-hidden="btnHidden"
              :dict-list="dictList"
              :form-labels="labelArr"
              :disabled="title !== '入库' && title !== '修改'"
              @handleEvent="handleEvent">
              <!-- 责任部门 -->
              <template #filter-assetDepartmentId>
                <treeselect
                  v-model="formData.assetDepartmentId"
                  :options="dictList.deptList"
                  :normalizer="normalizer"
                  :append-to-body="true"
                  placeholder="请选择责任部门"
                  :disabled="title !== '入库' && title !== '修改' && title !== '领用' && title !== '借用'"
                  :before-clear-all="clearAll"
                  @select="changeOrg" />
              </template>
              <!-- 责任人 -->
              <template #filter-ownerId>
                <div style="display: flex; justify-content: flex-start; align-items: center">
                  <el-select
                    v-model="formData.ownerId"
                    filterable
                    placeholder="请选择责任人"
                    size="12"
                    style="flex: 1"
                    :clearable="true"
                    :disabled="title !== '入库' && title !== '修改' && title !== '领用' && title !== '借用'"
                    @change="changeOwner">
                    <el-option v-for="item in dictList.userList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                  <template v-if="title == '详情'">
                    <div
                      v-if="formData.ownerId"
                      style="width: 100px; text-align: right; color: #189dff; cursor: pointer"
                      @click="lookDevice(formData)">
                      <a>查看所有设备</a>
                    </div>
                  </template>
                </div>
              </template>
              <!-- 设备类别 -->
              <template #filter-assetCategory>
                <el-select
                  v-model="formData.assetCategory"
                  filterable
                  placeholder="请选择设备类别"
                  size="12"
                  style="width: 100%"
                  :clearable="true"
                  @change="changeCategory">
                  <el-option
                    v-for="item in dictList.categoryList"
                    :key="item.id"
                    :label="item.dictValue"
                    :value="item.dictKey" />
                </el-select>
              </template>
              <!-- 使用类型 -->
              <template #filter-usageType>
                <div style="position: relative">
                  <div style="position: absolute; left: -91px; bottom: 3px">
                    <el-tooltip class="item" effect="light" placement="top-start">
                      <div slot="content">
                        个人使用设备是指供个人使用和管理维护的设备,如分配<br />给个人的日常办公电脑。<br />责任设备则是分配给个人管理维护供集体使用的设备,<br />如同一办公室内大家共同使用的网络打印机。
                      </div>
                      <i class="el-icon-question" style="font-size: 14px; color: #bfbfbf" />
                    </el-tooltip>
                  </div>
                  <el-select
                    v-model="formData.usageType"
                    filterable
                    placeholder="请选择使用类型"
                    size="12"
                    style="width: 100%"
                    :clearable="true">
                    <el-option
                      v-for="item in dictList.usageTypeList"
                      :key="item.id"
                      :label="item.dictValue"
                      :value="item.dictKey" />
                  </el-select>
                </div>
              </template>
              <!-- 存放位置 -->
              <template #filter-storageLocation>
                <el-form>
                  <el-input
                    v-model="formData.storageLocation"
                    filterable
                    placeholder="请输入存放位置"
                    size="12"
                    style="width: 100%"
                    :clearable="true"
                    maxlength="50"
                    :disabled="title !== '入库' && title !== '修改' && title !== '调拨'" />
                </el-form>
              </template>
              <!-- 预计归还日期 -->
              <template #filter-expectedReturnTime>
                <el-date-picker
                  v-model="formData.expectedReturnTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  :clearable="true"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :disabled="title !== '入库' && title !== '修改' && title !== '借用'" />
              </template>
            </hk-form>
          </div>
          <template v-if="title !== '入库' && title !== '修改' && title !== '借用'">
            <div v-if="imageUrl == '' || null" class="img-box">
              <img src="@/assets/images/kong@2x.png" alt="example" />
              <div style="color: rgba(0, 0, 0, 0.45); margin-top: 10px">暂无设备图片</div>
            </div>
            <div v-else class="img-box">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            </div>
          </template>
          <div v-else class="img-box">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :accept="accept">
              <!-- <img v-if="imageUrl" :src="imageUrl===null?'imageUrl1':'imageUrl'" class="avatar"> -->
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
              <!-- <div class="img-box">
                      <img src="@/assets/images/kong@2x.png" alt="example">
                      <div style="color: rgba(0, 0, 0, 0.45); margin-top: 10px; ">暂无设备图片</div>
                    </div> -->
            </el-upload>
          </div>
        </div>
      </div>
      <!-- 配置信息 -->
      <div v-if="showConfig" class="c-box noprint">
        <!-- 标题 -->
        <div style="display: flex">
          <i
            v-if="showTop"
            class="el-icon-arrow-down c-box-title"
            style="font-size: 16px"
            @click="showTop = !showTop" />
          <i
            v-if="!showTop"
            class="el-icon-arrow-right c-box-title"
            style="font-size: 16px"
            @click="showTop = !showTop" />
          <div
            class="c-box-title"
            style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 20px"
            @click="showTop = !showTop">
            配置信息
          </div>
        </div>
        <!-- 内容 -->
        <div v-if="showTop">
          <div style="width: 70%" class="asset-detail-form">
            <!-- :is-place="title === '详情'" -->

            <hk-form
              class="hk-flex"
              :data="formData"
              label-position="right"
              :rules="rules"
              label-width="125"
              :btn-hidden="btnHidden"
              :dict-list="dictList"
              :form-labels="configLabels"
              :disabled="title !== '入库' && title !== '修改'" />
          </div>
        </div>
      </div>

      <!-- 维保信息 -->
      <div v-if="showMaintenance" class="c-box noprint" :style="{ height: !showBottom ? '68px' : '' }">
        <div style="font-size: 16px; font-weight: 500">
          <!-- 标题 -->
          <div style="display: flex">
            <i
              v-if="showBottom"
              class="el-icon-arrow-down c-box-title"
              style="font-size: 16px"
              @click="showBottom = !showBottom" />
            <i
              v-if="!showBottom"
              class="el-icon-arrow-right c-box-title"
              style="font-size: 16px"
              @click="showBottom = !showBottom" />
            <div
              class="c-box-title"
              style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
              @click="showBottom = !showBottom">
              维保信息
            </div>
          </div>
          <!-- 内容 -->
          <div v-if="showBottom">
            <div style="width: 70%" class="asset-detail-form wh-from">
              <!-- :is-place="title === '详情'" -->

              <hk-form
                class="hk-flex"
                :data="formData"
                label-position="right"
                :rules="rules"
                label-width="125"
                :btn-hidden="btnHidden"
                :dict-list="dictList"
                :form-labels="proLabels"
                :disabled="title !== '入库' && title !== '修改'">
                <template #filter-list>
                  <hk-table
                    :table-data="tableData"
                    :table-columns="tableDataList"
                    :loading="loading"
                    show-index
                    is-need-inde />
                </template>
              </hk-form>
            </div>
          </div>
        </div>
      </div>
      <!-- 信息变更历史 -->
      <!-- v-hasPermi="['asset:list:info']" -->
      <div v-if="title == '详情'" v-hasPermi="['asset:list:info']" class="box-his c-box noprint">
        <div style="display: flex">
          <i v-if="showXX" class="el-icon-arrow-down c-box-title" style="font-size: 16px" @click="showXX = !showXX" />
          <i v-if="!showXX" class="el-icon-arrow-right c-box-title" style="font-size: 16px" @click="showXX = !showXX" />
          <div
            class="c-box-title"
            style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
            @click="showXX = !showXX">
            信息变更历史
          </div>
        </div>
        <template v-if="showXX">
          <div style="display: flex; justify-content: space-between; margin-bottom: 20px">
            <!-- <el-select v-model="value" placeholder="请选择" style="width: 175px; height: 24px !important" @change="changeTime">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
            <el-date-picker
              v-model="times"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeAttribute" />
            <div style="display: flex">
              <div style="margin-right: 20px; font-size: 14px; color: #4b6eef; cursor: pointer" @click="expandAll">
                <span style="margin-right: 2px">全部展开</span>
                <i class="el-icon-arrow-down" style="font-size: 16px" />
              </div>
              <div style="margin-right: 20px; font-size: 14px; color: #4b6eef; cursor: pointer" @click="collapseAll">
                <span style="margin-right: 2px">全部折叠</span>
                <i class="el-icon-arrow-up" style="font-size: 16px" />
              </div>
            </div>
          </div>
          <!-- 主题内容 -->
          <!-- <div class="times"> -->
          <div v-if="hisTitle.length" style="height: 300px; overflow: auto; padding: 20px">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in showAll ? hisTitle : hisTitle.slice(0, 3)"
                :key="index"
                :icon="item.icon"
                :type="item.type"
                :color="item.color"
                :size="item.size"
                :timestamp="item.timestamp">
                <el-collapse v-model="active" style="border: none" @change="handleChange">
                  <el-collapse-item name="1" style="border: none">
                    <template slot="title">
                      <div class="title-box">
                        <span style="margin: 0 20px">{{ item.timeRange }}</span>
                        <div class="icon" />
                        <span style="margin: 0 10px">责任人:</span>
                        <span style="color: #4b6eef; margin-right: 20px">
                          {{ item.owner }}
                        </span>
                        <!-- <div class="icon" />
                        <span style="margin: 0 10px;">使用类型:</span>
                        <span style="color: #4B6EEF;">
                          {{ item.type }}
                        </span> -->
                      </div>
                    </template>
                    <el-timeline>
                      <el-timeline-item
                        v-for="(i, idx) in item.list"
                        :key="idx"
                        :icon="i.icon"
                        :type="i.type"
                        :color="i.color"
                        :size="i.size">
                        <div>
                          <div>
                            <span style="margin-right: 20px">{{ i.opTime }}</span>
                            <span style="margin-right: 20px">变更类型：{{ i.opType }}</span>
                            <span>操作人：{{ i.opUser == null ? '—' : i.opUser }}</span>
                          </div>
                          <div v-if="i.opType === '资产盘点'">
                            <span
                              >盘点任务：<span style="color: #4b6eef; cursor: pointer" @click="toPDtask(i)">
                                {{ i.inventoryName }}
                              </span></span
                            >
                          </div>
                          <div style="display: flex; justify-content: flex-start; margin-top: 5px">
                            <div style="width: 70px; margin-right: 10px">
                              <span>变更内容: </span>
                            </div>
                            <div style="flex: 1; width: 0">
                              <span v-if="i.changeInfoList.length == 0">-</span>
                              <div v-for="y in i.changeInfoList" v-else :key="y" class="change-info">
                                <el-tooltip effect="dark" :content="y" placement="top">
                                  <span>
                                    {{ y }}
                                  </span>
                                </el-tooltip>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-timeline-item>
                    </el-timeline></el-collapse-item
                  >
                </el-collapse>
              </el-timeline-item>
            </el-timeline>
            <!-- <div v-if="hisTitle.length > 2 && !showAll" style="color: #4b6eef; cursor: pointer" @click="showAll = true">
              更多...
            </div>
            <div v-if="showAll" style="color: #4b6eef; cursor: pointer" @click="showAll = false">收起</div> -->
          </div>
          <el-empty v-else description="暂无记录" />
          <!-- </div> -->
          <!-- <div v-else>暂无数据</div> -->
        </template>
      </div>

      <!-- 流程变更历史 -->
      <div v-if="title == '详情'" class="box-his c-box noprint">
        <!-- <div style="font-size: 16px; font-weight: 500; margin-bottom: 20px">流程变更历史</div> -->
        <div style="display: flex">
          <i v-if="showLC" class="el-icon-arrow-down c-box-title" style="font-size: 16px" @click="showLC = !showLC" />
          <i v-if="!showLC" class="el-icon-arrow-right c-box-title" style="font-size: 16px" @click="showLC = !showLC" />
          <div
            class="c-box-title"
            style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
            @click="showLC = !showLC">
            流程变更历史
          </div>
        </div>
        <template v-if="showLC">
          <div style="display: flex; justify-content: space-between; margin-bottom: 20px">
            <!-- <el-select v-model="value" placeholder="请选择" style="width: 175px; height: 24px !important" @change="changeTime">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
            <el-date-picker
              v-model="flowTimes"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeAttributeFlow" />
            <div style="display: flex">
              <div style="margin-right: 20px; font-size: 14px; color: #4b6eef; cursor: pointer" @click="expandAll">
                <span style="margin-right: 2px">全部展开</span>
                <i class="el-icon-arrow-down" style="font-size: 16px" />
              </div>
              <div style="margin-right: 20px; font-size: 14px; color: #4b6eef; cursor: pointer" @click="collapseAll">
                <span style="margin-right: 2px">全部折叠</span>
                <i class="el-icon-arrow-up" style="font-size: 16px" />
              </div>
            </div>
          </div>
          <!-- 主题内容 -->
          <!-- <div class="times"> -->
          <div v-if="flowPath.length" style="height: 300px; overflow: auto; padding: 20px">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in showAllFlow ? flowPath : flowPath.slice(0, 3)"
                :key="index"
                :icon="item.icon"
                :type="item.type"
                :color="item.color"
                :size="item.size"
                :timestamp="item.timestamp">
                <el-collapse v-model="active" style="border: none" @change="handleChange">
                  <el-collapse-item name="1" style="border: none">
                    <template slot="title">
                      <div class="title-box">
                        <span style="margin: 0 20px">{{ item.timeRange }}</span>
                        <div class="icon" />
                        <span style="margin: 0 10px">责任人:</span>
                        <span style="color: #4b6eef; margin-right: 20px">
                          {{ item.owner }}
                        </span>
                        <!-- <div class="icon" />
                        <span style="margin: 0 10px;">使用类型:</span>
                        <span style="color: #4B6EEF;">
                          {{ item.type }}
                        </span> -->
                      </div>
                    </template>
                    <el-timeline>
                      <el-timeline-item
                        v-for="(i, idx) in item.list"
                        :key="idx"
                        :icon="i.icon"
                        :type="i.type"
                        :color="i.color"
                        :size="i.size">
                        <div>
                          <div>
                            <span style="margin-right: 20px">{{ i.opTime }}</span>
                            <span style="margin-right: 20px">变更类型：{{ i.opType }}</span>
                            <span>操作人：{{ i.opUser == null ? '—' : i.opUser }}</span>
                          </div>

                          <div style="display: flex; margin-top: 5px">
                            <div style="width: 70%; display: flex; justify-content: flex-start">
                              <div style="width: 70px; margin-right: 10px">
                                <span>变更内容: </span>
                              </div>
                              <div style="flex: 1; width: 0">
                                <span v-if="i.changeInfoList.length == 0">-</span>
                                <div v-for="y in i.changeInfoList" v-else :key="y" class="change-info">
                                  <el-tooltip effect="dark" :content="y" placement="top">
                                    <span>
                                      {{ y }}
                                    </span>
                                  </el-tooltip>
                                </div>
                              </div>
                            </div>

                            <div
                              v-if="i.annexList.length > 0"
                              style="
                                width: 30%;
                                padding-left: 10px;
                                display: flex;
                                justify-content: flex-start;
                                align-items: flex-start;
                              ">
                              <span style="margin-right: 10px">附件: </span>

                              <div>
                                <div v-for="k in i.annexList" :key="k.url">
                                  <span style="cursor: pointer; color: #189dff" @click="openFileUrl(k)">
                                    {{ k.name }}</span
                                  >
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-timeline-item>
                    </el-timeline></el-collapse-item
                  >
                </el-collapse>
              </el-timeline-item>
            </el-timeline>
            <!-- <div
              v-if="flowPath.length > 2 && !showAllFlow"
              style="color: #4b6eef; cursor: pointer"
              @click="showAllFlow = true">
              更多...
            </div>
            <div v-if="showAllFlow" style="color: #4b6eef; cursor: pointer" @click="showAllFlow = false">收起</div> -->
          </div>
          <el-empty v-else description="暂无记录" />
          <!-- </div> -->
          <!-- <div v-else>暂无数据</div> -->
        </template>
      </div>
      <!-- 盘点记录  -->
      <div v-if="title !== '入库'" id="deviceInfo" class="c-box noprint">
        <div style="display: flex">
          <i v-if="showPD" class="el-icon-arrow-down c-box-title" style="font-size: 16px" @click="showPD = !showPD" />
          <i v-if="!showPD" class="el-icon-arrow-right c-box-title" style="font-size: 16px" @click="showPD = !showPD" />
          <div
            class="c-box-title"
            style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
            @click="showPD = !showPD">
            盘点记录
          </div>
        </div>
        <template v-if="showPD">
          <hk-table
            style="max-height: 370px"
            :pro-ref="'check-table'"
            :table-data="checkData"
            :table-columns="checkDataList"
            :show-index="true"
            :dict-list="dictList"
            :is-need-index="true"
            :loading="checkLoading"
            :total="checkTotal"
            :table-height="200"
            operate
            :query-params="checkParams"
            @changePage="getCheckData">
            <template #taskName="{ row }">
              <el-button type="text" @click="toDetail(row.row)">{{ row.row.taskName }}</el-button>
            </template>
            <template #operate="{ row }">
              <el-button type="text" @click="toDetail(row.row)">详情</el-button>
            </template>
          </hk-table>
        </template>
        <!-- <el-empty v-else description="暂无数据" /> -->
      </div>
      <!-- 责任设备  -->
      <div v-if="showInfo" id="deviceInfo" class="c-box noprint">
        <div style="display: flex">
          <i
            v-if="showDevice"
            class="el-icon-arrow-down c-box-title"
            style="font-size: 16px"
            @click="showDevice = !showDevice" />
          <i
            v-if="!showDevice"
            class="el-icon-arrow-right c-box-title"
            style="font-size: 16px"
            @click="showDevice = !showDevice" />
          <div
            class="c-box-title"
            style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
            @click="showDevice = !showDevice">
            责任设备
          </div>
        </div>
        <template v-if="showDevice">
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane :label="`当前设备（${assetData.currentTabDevice || 0}）`" name="1" />
            <el-tab-pane :label="`历史设备（${assetData.historyTabDevice || 0}）`" name="2" />
            <el-tab-pane :label="`全部（${assetData.allTabDevice || 0}）`" name="3" />
          </el-tabs>
          <div class="tags">
            <div :class="['duty-item', { active: activeDevice == 'all' }]" @click="handleDevice('all')">
              <div>
                <img :src="require('@/assets/images/user01.png')" alt />
                <span>全部设备</span>
              </div>
              <span>{{ assetData.currentDevice || 0 }}</span>
            </div>
            <div :class="['duty-item', { active: activeDevice == '1' }]" @click="handleDevice('1')">
              <div>
                <img :src="require('@/assets/images/user02.png')" alt />
                <span>个人使用设备（台）</span>
              </div>
              <span>{{ assetData.useDevice || 0 }}</span>
            </div>
            <div :class="['duty-item', { active: activeDevice == '2' }]" @click="handleDevice('2')">
              <div>
                <img :src="require('@/assets/images/user03.png')" alt />
                <span>责任设备（个）</span>
              </div>
              <span>{{ assetData.liabilityDevice || 0 }}</span>
            </div>
          </div>

          <div class="sp-flex">
            <div class="left">
              <template v-if="assetData.assetsCategory && assetData.assetsCategory.length > 0">
                <span v-for="(item, indx) in assetData.assetsCategory" :key="item + indx"
                  >{{ item.name }}:{{ item.count }}</span
                >
              </template>

              <i v-if="assetData.assetsCategory && assetData.assetsCategory.length > 0" />
              <span v-for="(i, inx) in assetData.returned" :key="i.name + inx"> {{ i.name }}:{{ i.count }} </span>
            </div>
            <div class="right">
              <el-input
                v-model="queryParams.keyword"
                size="small"
                placeholder="请输入设备名称/IP/MAC"
                clearable
                @keyup.enter.native="handleQuery" />
              <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
            </div>
          </div>
          <hk-table
            :table-data="deviceData"
            :table-columns="userCredentialList"
            :show-index="true"
            :dict-list="dictList"
            :is-need-index="true"
            :loading="loading"
            :total="total"
            :table-height="80"
            :query-params="queryParams"
            @changePage="getDataList">
            <template #assetName="{ row }">
              {{ row.row.assetName }}
              <span class="tip-box" v-if="row.row.isExpectedReturn == '1'">还</span>
            </template>
          </hk-table>
        </template>
        <!-- <el-empty v-else description="暂无数据" /> -->
      </div>
    </div>
    <div v-if="title !== '入库'" v-show="isPrint" id="printArea">
      <PrintVue ref="printBtn" />
    </div>

    <footer>
      <div class="div-foot">
        <!-- <el-button ref="printBtn" v-print="print" type="primary" :loading="printLoading" @click="onPrint"
          >打 印</el-button
        > -->
        <el-button
          v-if="title !== '入库'"
          ref="printBtn"
          v-hasPermi="['asset:list:print']"
          v-print="print"
          type="primary"
          :loading="printLoading"
          @click="onPrint"
          >打 印</el-button
        >
        <el-button v-if="title !== '详情'" type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="$router.go(-1)">取 消</el-button>
        <el-button v-if="title !== '入库' && hiddenDel"   v-hasPermi="['asset:list:del']" @click="handDelete">删除</el-button>
        <!-- -->
      </div>
    </footer>
  </div>
</template>
  <script>
import {
  getDict,
  userList,
  dictItemsList,
  detail,
  saveOrUpdate,
  changeList,
  deleteItem,
  assetDict,
  queryAssetsCheckResult,
} from '@/api/specialProject/asset'
import { treeSelect } from '@/api/specialProject/personnel'
// import { queryUserList } from '@/api/assets/host.js'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
import HkTable from '@/components/Hk-Table/index.vue'
import HkForm from '@/components/Hk-Form'
import { parseTime } from '@/utils/hongke'
import { assetsTotal, assetPageList } from '@/api/specialProject/systemUser'
import PrintVue from './print.vue'
export default {
  components: { HkForm, HkTable, Treeselect, PrintVue },
  data() {
    return {
      isPrint: false,
      top: 0,
      openSwitch: false,
      inputSwitch: 2,
      queryParams: {
        current: 1,
        size: 10,
      },
      checkParams: {
        current: 1,
        size: 10,
      },
      checkData: [],
      checkTotal: 0,
      total: 0,
      loading: false,
      checkLoading: false,
      activeName: '1',
      activeDevice: 'all',
      usageType: null,
      assetData: {},
      checkDataList: [
        { label: '任务名称', param: 'taskName', type: 'slot' },
        { label: '任务描述', param: 'taskNotes' },
        { label: '盘点类型', param: 'inventoryDetails' },
        { label: '盘点结果', param: 'inventoryType' },
        { label: '盘点时间', param: 'inventoryTime' },
      ],
      userCredentialList: [
        { label: '设备名称', param: 'assetName', type: 'slot' },
        { label: '设备IP', param: 'ip' },
        { label: 'MAC地址', param: 'mac' },
        { label: '设备类别', param: 'assetCategory' },
        { label: '设备类型', param: 'assetType' },
        { label: '设备状态', param: 'status' },
        { label: '使用类型', param: 'usageType' },
        { label: '是否普密设备', param: 'isStandardSecurityDevice' },
        // { label: '是否国产化', param: 'credential' },
        { label: '涉密等级', param: 'securityLevel' },
        { label: '存放位置', param: 'storageLocation' },
      ],
      tableIndex: undefined,
      // 是否显示维保信息厂家配置
      showLC: true,
      showXX: true,
      showDevice: true,
      showPD: true,
      showMaintenance: true,
      showConfig: true,
      checked: false,
      showTop: true,
      showBottom: true,
      showInfo: false,
      showAll: true,
      showAllFlow: true,
      active: ['1', '2', '3'],
      deptsId: '',
      categoryPid: '',
      btnHidden: true,
      assetsCode: '',
      ownerId: '',
      ownerName: '',
      // 上传图片
      uploadUrl: window.baseUrl.action + '/attachment/upload',
      imageUrl: '',
      imageUrl1: '@/assets/images/kong@2x.png',
      accept: '.png',
      // 自定义时间
      startTime: '',
      endTime: '',
      times: [],
      flowTimes: [],
      assetDisabled: false,
      // 表单项配置
      formLabels: [
        {
          label: '设备名称',
          field: 'assetName',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
          position: false,
        },
        {
          label: '设备编号',
          field: 'assetCode',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          disabled: true,
          placeHolder: '自动生成',
          position: false,
        },
        {
          label: '部署服务器',
          field: 'deploymentServer',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          position: false,
        },
        {
          label: '设备IP',
          field: 'ip',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          position: false,
        },
        {
          label: '设备MAC',
          field: 'mac',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          position: false,
        },
        {
          label: '设备类别',
          field: 'assetCategory',
          type: 'slot',
          span: 12,
          hidden: true,
          position: false,
        },
        {
          label: '设备类型',
          field: 'assetType',
          type: 'cascader',
          list: 'deviceTypeList',
          span: 12,
          props: {
            children: 'children',
            label: 'dictValue',
            value: 'dictKey',
            emitPath: false,
            // checkStrictly: false
          },
          hidden: false,
          position: false,
        },
        {
          label: '设备密级',
          field: 'securityLevel',
          type: 'select',
          list: 'securityList',
          span: 12,
          disabled: true,
          hidden: false,
          position: false,
        },
        {
          label: '责任部门',
          field: 'assetDepartmentId',
          type: 'slot',
          hidden: false,
          position: false,
        },
        {
          label: '责任人',
          field: 'ownerId',
          type: 'slot',
          hidden: false,
          position: false,
        },
        {
          label: '使用状态',
          field: 'usageStatus',
          type: 'select',
          list: 'usageList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '设备状态',
          field: 'deviceStatus',
          type: 'select',
          list: 'deviceList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '存放区域',
          field: 'storageDistrict',
          type: 'select',
          list: 'regionList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '存放位置',
          field: 'storageLocation',
          type: 'slot',
          span: 12,
          maxlength: 20,
          hidden: false,
          position: false,
        },
        {
          label: '设备来源',
          field: 'assetSource',
          type: 'select',
          list: 'assetSourceList',
          span: 12,
          hidden: false,
          position: false,
        },

        {
          label: '是否为普秘设备',
          field: 'isStandardSecurityDevice',
          type: 'select',
          list: 'isStandardList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '预计归还日期',
          field: 'expectedReturnTime',
          type: 'slot',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '刻录权限',
          field: 'burnPermission',
          type: 'select',
          list: 'burnList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '使用类型',
          field: 'usageType',
          type: 'slot',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '接入交换机',
          field: 'exchange',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          position: false,
        },
      ],
      // 配置信息
      configLabels: [
        {
          label: '厂商',
          field: 'manufacturer',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '品牌',
          field: 'brand',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '型号',
          field: 'model',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '序列号',
          field: 'assetSerialNumber',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: 'CPU',
          field: 'cpu',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '内存容量',
          field: 'memoryCapacity',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '磁盘空间',
          field: 'diskSpace',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '操作系统',
          field: 'operatingSystem',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '操作系统版本',
          field: 'osVersion',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '安装时间',
          field: 'installTime',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
          hidden: false,
        },
        {
          label: '内置光驱类别',
          field: 'opticalDriveType',
          type: 'select',
          list: 'driveTypeList',
          span: 12,
          hidden: false,
        },
        {
          label: '内置光驱状态',
          field: 'opticalDriveStatus',
          type: 'select',
          list: 'driveStatusList',
          span: 12,
          hidden: false,
        },
        {
          label: '用途说明',
          field: 'usageDescription',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '磁盘序列号',
          field: 'diskSerialNumber',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
      ],
      // 维保信息
      proLabels: [
        {
          label: '设备购置时间',
          field: 'purchaseTime',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
        },
        {
          label: '设备入网时间',
          field: 'networkEntryTime',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
        },
        {
          label: '过保日期',
          field: 'expirationOfWarrantyDate',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
        },
        {
          label: '设备启用日期',
          field: 'deviceStartDate',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
        },
        {
          label: '维保厂家名称',
          field: 'maintenanceManufacturerName',
          type: 'input',
          span: 12,
          maxlength: 20,
        },
        {
          label: '维保厂家电话',
          field: 'maintenanceManufacturerPhone',
          type: 'input',
          span: 12,
          maxlength: 20,
        },
        {
          label: '维保记录',
          field: 'list',
          type: 'slot',
          span: 24,
        },
      ],
      // 表格信息
      deviceData: [],
      tableData: [],
      tableDataList: [
        { label: '维修时间', param: 'repairTime' },
        { label: '维修地点', param: 'repairLocation' },
        { label: '维修厂商', param: 'manufacturer' },
        { label: '维修费用', param: 'cost' },
        { label: '备注', param: 'remark' },
      ],
      flowPath: [],
      hisTitle: [],
      //  信息变更历史
      value: '2',
      options: [
        { label: '近一日', value: '1' },
        { label: '近一周', value: '2' },
        { label: '近一月', value: '3' },
      ],
      // 数组
      dictList: {
        categoryList: [],
        departList: [],
        ownerList: [],
        usageList: [],
        deviceList: [],
        securityList: [],
        isStandardListL: [],
        burnList: [],
        usageTypeList: [],
        driveTypeList: [],
        driveStatusList: [],
        deptList: [],
        userList: [],
        deviceTypeList: [],
        assetSourceList: [],
        regionList: [],
      },
      formData: {},
      msgData: {},
      // 表单验证
      rules: {
        assetName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // assetCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // ip: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // assetCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
        assetType: [{ required: true, message: '请选择', trigger: 'blur' }],
        usageStatus: [{ required: true, message: '请选择', trigger: 'blur' }],
        deviceStatus: [{ required: true, message: '请选择', trigger: 'blur' }],
        // storageLocation: [{ required: true, message: '不能为空', trigger: 'blur' }],
        securityLevel: [{ required: true, message: '请选择', trigger: 'blur' }],
        // isStandardSecurityDevice: [{ required: true, message: '请选择', trigger: 'blur' }],

        // assetDepartmentId: [{ required: this.title === '借用', message: '请选择', trigger: 'blur' }],
        // ownerName: [{ required: this.title === '借用', message: '请选择', trigger: 'blur' }],
        // expectedReturnTime: [{ required: this.title === '借用', message: '请选择', trigger: 'blur' }],
      },
      knowId: null,
      type: null, // 操作类型 0编辑 1审核

      title: '新增',
      printLoading: false,
      print: {
        id: 'printArea',
        popTitle: '标题', // 打印配置页上方标题
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        // 开启打印前的回调事件
        beforeOpenCallback(e) {
          console.log(e, 'e')

          document.title = e.formData.assetCode + '_' + e.formData.assetName
          e.printLoading = true
          e.isPrint = true
        },
        openCallback(e) {
          e.printLoading = false
          e.isPrint = false
        },
        // 关闭打印的回调事件（无法确定点击的是确认还是取消）
        closeCallback(e) {
          e.isPrint = false
          document.title = sessionStorage.getItem('currentTitle')
        },

        url: '',
        standard: '',
        extraCss: '',
        picturePath: null,
      },
      queryKey: null,
      queryValue: null,
      queryId: null,
      showArr: ['deploymentServer'],
      configArr: [],
      labelArr: [],
      loadArr: [],
      isFixed: true,
      hiddenDel: false,
      firstTop: 0,
    }
  },
  async created() {
    sessionStorage.setItem('currentTitle', document.title)
    this.knowId = this.$route.query?.id
    this.title = this.$route.query?.title
    this.queryValue = this.$route.query?.dictValue
    this.queryKey = this.$route.query?.dictKey
    this.queryId = this.$route.query?.dictId

    this.formData.assetCategory = this.queryKey

    // this.isPlace = this.title === '详情'
    if (this.queryValue === '终端' || this.queryValue === '服务器') {
      this.rules.ip = [{ required: true, message: '不能为空', trigger: 'blur' }]
      this.rules.assetSource = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.storageDistrict = [{ required: true, message: '请选择', trigger: 'blur' }]
    }

    if (this.queryValue === '网络设备' || this.queryValue === '安全保密产品' || this.queryValue === '外部设备') {
      // this.rules.ip = [{ required: true, message: '不能为空', trigger: 'blur' }]
      this.rules.usageStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.deviceStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.storageLocation = [{ required: true, message: '不能为空', trigger: 'blur' }]
      this.rules.isStandardSecurityDevice = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.assetSource = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.storageDistrict = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.showArr.push('burnPermission')
      this.configArr.push(
        'cpu',
        'memoryCapacity',
        'diskSpace',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }
    if (this.queryValue === '移动存储介质') {
      this.rules.usageStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.deviceStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.storageLocation = [{ required: true, message: '不能为空', trigger: 'blur' }]
      this.rules.isStandardSecurityDevice = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.assetSource = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.storageDistrict = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.showArr.push('burnPermission', 'ip', 'mac', 'exchange')
      this.configArr.push(
        'cpu',
        'diskSpace',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }
    if (this.queryValue === '其他设备') {
      this.showMaintenance = false

      // this.rules.ip = [{ required: true, message: '不能为空', trigger: 'blur' }]
      this.rules.usageStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.deviceStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.assetSource = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.storageDistrict = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.showArr.push(
        'burnPermission',
        'mac',
        'exchange',
        'expectedReturnTime',
        'usageType',
        'isStandardSecurityDevice'
      )
      this.configArr.push(
        'cpu',
        'diskSpace',
        'memoryCapacity',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }
    if (this.queryValue === '软件系统') {
      this.rules.ip = [{ required: true, message: '不能为空', trigger: 'blur' }]
      this.rules.usageStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.deviceStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.deploymentServer = [{ required: true, message: '不能为空', trigger: 'blur' }]
      this.showArr = []
      this.showArr.push(
        'burnPermission',
        'mac',
        'exchange',
        'expectedReturnTime',
        'usageType',
        'isStandardSecurityDevice',
        'storageLocation',
        'storageDistrict',
        'assetSource'
      )
      this.configArr.push(
        'cpu',
        'diskSpace',
        'memoryCapacity',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }
    if (this.queryValue === '无形资产') {
      this.showMaintenance = false
      this.showConfig = false
      // this.rules.ip = [{ required: true, message: '不能为空', trigger: 'blur' }]
      this.rules.usageStatus = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.deviceStatus = [{ required: true, message: '请选择', trigger: 'blur' }]

      this.showArr.push(
        'burnPermission',
        'mac',
        'exchange',
        'expectedReturnTime',
        'usageType',
        'isStandardSecurityDevice',
        'storageDistrict',
        'assetSource'
      )
      this.configArr.push(
        'cpu',
        'diskSpace',
        'memoryCapacity',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }

    // 遍历隐藏 不需要的属性
    for (var k of this.showArr) {
      var j = this.formLabels.findIndex((item) => item.field === k)
      if (j !== -1) {
        this.formLabels[j].hidden = true
      }
    }
    for (var y of this.configArr) {
      var h = this.configLabels.findIndex((item) => item.field === y)
      if (h !== -1) {
        console.log(h, 'hh')
        this.configLabels[h].hidden = true
      }
    }
    if (this.queryId) {
      this.getDeviceType(this.queryId)
    }

    if (this.title === '借用') {
      this.rules.assetDepartmentId = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.ownerId = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.expectedReturnTime = [{ required: true, message: '请选择', trigger: 'blur' }]
    }
    if (this.title === '领用') {
      this.rules.assetDepartmentId = [{ required: true, message: '请选择', trigger: 'blur' }]
      this.rules.ownerId = [{ required: true, message: '请选择', trigger: 'blur' }]
    }
    if (this.title === '入库') {
      this.formLabels.forEach((item) => {
        if (item.field === 'securityLevel') {
          item.disabled = false
        }
      })
    }

    var ars = this.formLabels.filter((item) => {
      if (item.hidden !== true) {
        return item
      }
    })
    this.loadArr = ars
    this.labelArr = this.loadArr

    await this.getDictDatas()
    if (this.title !== '入库') {
      this.getCheckData()
    }

    this.getdepts()
    // this.getusers()

    this.knowId && (await this.getDetails())
  },
  mounted() {
    this.$nextTick(() => {
      if (this.title === '入库') {
        this.formData.usageStatus = '2'
        this.formData.deviceStatus = '1'
      }
      var scrollTop = this.$refs.formRef.$el.getBoundingClientRect().top
      this.top = scrollTop
      // 记录元素刚开始的位置
      // console.log(scrollTop, 'scrollTop')
    })
  },
  methods: {
    // 盘点结果
    toDetail(row) {
      console.log(row, 'faew')
      this.$router.push({
        path: '/specialProject/assets/InventoryResult',
        query: {
          title: '盘点结果',
          id: row.taskId,
          assetCode: this.formData.assetCode,
        },
      })
    },
    // 盘点任务
    toPDtask(row) {
      console.log(row, 'faew')
      this.$router.push({
        path: '/specialProject/assets/InventoryResult',
        query: {
          title: '盘点结果',
          id: row.inventoryId,
          assetCode: this.formData.assetCode,
        },
      })
    },
    // 盘点记录分页
    getCheckData() {
      this.checkLoading = true
      queryAssetsCheckResult({ assetsId: this.knowId, ...this.checkParams }).then((res) => {
        res.list.forEach((element) => {
          for (const key in element) {
            element[key] = element[key] || '—'
          }
        })
        this.checkLoading = false
        this.checkData = res.list
        this.checkTotal = res.total
      })
    },
    onPrint() {
      this.isPrint = true
    },
    // 表单项重新赋值
    getTop(e) {
      this.labelArr = e
    },
    // 是否只展示必填项
    changeShow() {
      if (this.showArr.indexOf('assetCategory') == -1) {
        this.showArr.push('assetCategory')
      }
      const keys = Object.keys(this.rules)
      this.loadArr.forEach((item) => {
        if (this.showArr.indexOf(item.field) !== -1) {
          item.hidden = true
        } else {
          if (keys.includes(item.field)) {
            item.hidden = false
          } else {
            item.hidden = this.checked
          }
        }
      })

      setTimeout(() => {
        this.changeLabel()
      }, 100)
    },
    // // 是否只展示必填项
    changeLabel() {
      this.labelArr = []
      if (this.checked) {
        var ars = this.loadArr.filter((item) => {
          if (item.hidden !== true) {
            return item
          }
        })
        this.labelArr = ars
      } else {
        this.labelArr = this.loadArr
      }

      setTimeout(() => {
        this.changeSwitch(this.openSwitch)
      }, 100)
      console.log(this.labelArr, 'fff')
    },
    // 开关固定按钮
    changeSwitch(e) {
      if (e) {
        var scrollTop = this.$refs.formRef.$el.getBoundingClientRect().top
        this.top = scrollTop
        this.isFixed = true
        var idx = this.inputSwitch * 2
        this.labelArr.forEach((item, index) => {
          if (index < idx) {
            this.$set(item, 'position', true)
          } else {
            this.$set(item, 'position', false)
          }
        })
      } else {
        this.labelArr.forEach((item, index) => {
          this.$set(item, 'position', false)
        })
      }
    },
    openFileUrl(e) {
      window.open(`${window.baseUrl.action}/attachment/preview?path=${e.url}`)
    },
    // 责任设备 查询
    handleQuery() {
      this.queryParams.current = 1
      this.getDataList()
    },
    //  重置
    resetQuery() {
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.getDataList()
    },
    //  切换设备
    handleDevice(type) {
      this.activeDevice = type
      this.usageType = type
      if (type == 'all') {
        this.usageType = null
      }
      this.getDataList()
    },
    handleTabClick() {
      this.getAssetTabData()
      this.getDataList()
    },
    //  获取设备数据
    getAssetTabData() {
      assetsTotal({ id: this.deviceId, type: this.activeName }).then((res) => {
        this.assetData = res
      })
    },
    //  获取资产列表数据
    getDataList() {
      this.loading = true
      assetPageList({ id: this.deviceId, type: this.activeName, usageType: this.usageType, ...this.queryParams }).then(
        (res) => {
          this.loading = false
          this.deviceData = res.list
          this.total = res.total
        }
      )
    },
    // 查看此人全部设备
    lookDevice(e) {
      console.log(e, 'ee')
      this.deviceId = e.ownerId
      this.showInfo = true
      this.handleTabClick()
      this.handleScrollBottom()
    },
    handleScrollBottom() {
      this.$nextTick(() => {
        const scrollElem = this.$refs.scrollDiv
        scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' })
      })
    },
    handDelete() {
      var that = this
      this.$modal
        .confirm('您确定要删除当前数据吗')
        .then(function () {
          return deleteItem(that.knowId)
        })
        .then(() => {
          that.$modal.msgSuccess('删除成功')
          that.$router.go(-1)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 详情
    getDetails() {
      detail({ id: this.knowId }).then((res) => {
        if (res.deleteIdentity == '0') {
          // 代表删除了的资产
          this.hiddenDel = false
        } else {
          this.hiddenDel = true
        }
        for (const key in res) {
          if (res[key] === '') {
            res[key] = null
          }
        }

        this.formData = res
        this.tableData = res.list
        this.assetsCode = res.assetCode
        if (this.title === '详情') {
          this.getchangeList()
          this.flowChangeList()
        }
        this.getusers(res.assetDepartmentId, res.ownerId)
        this.changeCategory(res.assetCategory, 'detail')

        if (res.picturePath) {
          this.imageUrl = window.baseUrl.default + res.picturePath
          console.log(this.imageUrl, ' this.imageUrl ')
        }
        this.ownerName = res.ownerName
        this.ownerId = res.ownerId

        // this.changeOwner(res.ownerId)

        if (this.title === '归还') {
          this.formData.expectedReturnTime = null
          this.formData.ownerId = null
          this.formData.usageStatus = '2'
        }
        if (this.title === '领用') {
          this.formData.usageStatus = '1'
        }
        if (this.title === '借用') {
          this.formData.usageStatus = '3'
          this.isRequire = true
        }
        if (this.title === '维修') {
          this.formData.deviceStatus = '2'
        }
        if (this.title === '报废') {
          this.formData.ownerId = null
          this.formData.usageStatus = '2'
          this.formData.deviceStatus = '3'
        }
        if (this.title === '待报废') {
          this.formData.deviceStatus = '4'
        }
      })
    },
    // 字典获取   数组
    getDictDatas() {
      getDict({ code: 'assetCategory' }).then((res) => {
        this.dictList.categoryList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          // this.getDeviceType(o.id)
          return o
        })
      })
      getDict({ code: 'deviceStatus' }).then((res) => {
        this.dictList.deviceList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'assetDepartmentName' }).then((res) => {
        this.dictList.departList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'assetSource' }).then((res) => {
        this.dictList.assetSourceList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      assetDict('deposit_region').then((res) => {
        this.dictList.regionList = res.map((o) => {
          o.label = o.name
          o.value = o.id
          return o
        })
      })
      getDict({ code: 'ownerName' }).then((res) => {
        this.dictList.departList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'usageStatus' }).then((res) => {
        this.dictList.usageList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })

      getDict({ code: 'securityLevel' }).then((res) => {
        this.dictList.securityList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'isStandardSecurityDevice' }).then((res) => {
        this.dictList.isStandardList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'burnPermission' }).then((res) => {
        this.dictList.burnList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'usageType' }).then((res) => {
        this.dictList.usageTypeList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'opticalDriveType' }).then((res) => {
        this.dictList.driveTypeList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
      getDict({ code: 'opticalDriveStatus' }).then((res) => {
        this.dictList.driveStatusList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
    },
    // 设备类型
    getDeviceType(id) {
      dictItemsList({ parentId: id }).then((res) => {
        this.dictList.deviceTypeList = res
      })
    },
    // 责任部门
    getdepts() {
      treeSelect().then((res) => {
        this.dictList.deptList = res
      })
    },
    // 查询责任人
    getusers(id, ownerId) {
      userList({ orgId: id }).then((res) => {
        this.dictList.userList = res.map((i) => ({ name: i.name, id: i.id }))
        if (ownerId) {
          this.formData.ownerId = ownerId
          this.$refs.formRef.setFormData('ownerId', ownerId)
        }
      })
    },
    // 部门change事件
    changeOrg(node) {
      console.log(node, 'ssss')
      if (this.formData.ownerId) {
        this.formData.ownerId = null
      }
      this.getusers(node.id)
    },
    // 部门清空事件
    clearAll(e) {
      this.$refs.formRef.setFormData('assetDepartmentId', null)
      this.$refs.formRef.setFormData('assetDepartmentName', null)
      this.formData.assetDepartmentId = null
      this.formData.assetDepartmentName = null
      if (this.formData.ownerId) {
        this.formData.ownerId = null
        this.formData.ownerName = null
        this.$refs.formRef.setFormData('ownerId', null)
        this.$refs.formRef.setFormData('ownerName', null)
      }
      this.getusers()
    },
    // 设备类别change事件
    changeCategory(value, type) {
      if (!type && this.formData.assetType) {
        this.formData.assetType = null
      }
      getDict({ code: 'assetCategory' }).then(async (res) => {
        this.dictList.categoryList = await res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
        const currentObj = this.dictList.categoryList.filter((item) => {
          return item.value === value
        })
        if (currentObj.length > 0) {
          this.getDeviceType(currentObj[0].id)
        }
      })

      // this.dictList.categoryList.map((o) => {
      //   o.label = o.dictValue
      //   o.value = o.dictKey
      //   this.getDeviceType(o.id)
      //   return o
      // })
      // this.getDeviceType(value)
    },
    changeOwner(value) {
      const ownerObj = this.dictList.userList.find((item) => {
        return item.id === value
      })
      this.ownerId = value
      this.ownerName = ownerObj.name
    },
    handleChange() {},
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      }
    },
    // 信息变更历史
    getchangeList() {
      this.showXX = false
      const end = new Date()
      const start = new Date()
      let nstart = null
      let nend = null
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      // end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
      nstart = this.setStartTime(start.getTime())
      nend = this.setEndTime(end.getTime())
      this.times = [parseTime(nstart), parseTime(nend)]
      // updateIdentity:0基本信息 程变更传"1
      changeList({
        updateIdentity: 0,
        assetCode: this.assetsCode,
        startTime: this.times?.[0],
        endTime: this.times?.[1],
      }).then((res) => {
        this.showXX = true
        this.hisTitle = res
        this.hisTitle.map((item) => {
          item.color = '#4b6eef'
          item.list.map((i) => {
            i.color = '#0bbd87'
          })
        })
      })
    },
    // 流程变更历史
    flowChangeList() {
      this.showLC = false
      const end = new Date()
      const start = new Date()
      let nstart = null
      let nend = null
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(end.getTime())
      // end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
      nstart = this.setStartTime(start.getTime())
      nend = this.setEndTime(end.getTime())
      this.flowTimes = [parseTime(nstart), parseTime(nend)]
      // updateIdentity:0基本信息 程变更传"1
      changeList({
        updateIdentity: 1,
        assetCode: this.assetsCode,
        startTime: this.flowTimes?.[0],
        endTime: this.flowTimes?.[1],
      }).then((res) => {
        this.showLC = true
        this.flowPath = res
        this.flowPath.map((item) => {
          item.color = '#4b6eef'
          item.list.map((i) => {
            i.color = '#0bbd87'
          })
        })
      })
    },
    // time为某一天的时间戳
    setStartTime(time) {
      const nowTimeDate = new Date(time)
      return nowTimeDate.setHours(0, 0, 0, 0)
    },
    setEndTime(time) {
      const nowTimeDate = new Date(time)
      return nowTimeDate.setHours(23, 59, 59, 999)
    },
    changeAttribute() {
      changeList({
        updateIdentity: 0,
        assetCode: this.assetsCode,
        startTime: this.times?.[0],
        endTime: this.times?.[1],
      }).then((res) => {
        this.hisTitle = res
        this.hisTitle.map((item) => {
          item.color = '#4b6eef'
        })
      })
    },
    changeAttributeFlow() {
      changeList({
        updateIdentity: 1,
        assetCode: this.assetsCode,
        startTime: this.flowTimes?.[0],
        endTime: this.flowTimes?.[1],
      }).then((res) => {
        this.flowPath = res
        this.flowPath.map((item) => {
          item.color = '#4b6eef'
        })
      })
    },
    // 表单事件处理
    handleEvent(event, value, obj) {
      // // eslint-disable-next-line no-empty
      // if (obj.field === 'assetCategory' && obj.value.length > 0) {
      // }
    },

    // 全部展开，全部折叠
    expandAll() {
      // this.active = this.hisTitle.map((item, index) => index)
      this.active = ['1', '2', '3']
    },
    collapseAll() {
      this.active = []
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.picturePath = res.data[0].url
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },

    // 提交事件
    async submitForm() {
      const res = await this.$refs.formRef.handleFormSubmit('formLabels')
      const assetType = this.formData.assetType
      // return false
      // const ownerId = this.ownerId
      saveOrUpdate({
        ...res,
        assetType: assetType,
        ownerId: this.ownerId,
        ownerName: this.ownerName,
        picturePath: this.picturePath,
      }).then((res) => {
        if (!this.$route.query.id) {
          this.$message.success('入库成功')
          this.$router.go(-1)
        } else {
          if (this.title === '修改') {
            this.$message.success('修改成功')
          } else if (this.title === '调拨') {
            this.$message.success('调拨成功')
          } else if (this.title === '领用') {
            this.$message.success('领用成功')
          } else if (this.title === '借用') {
            this.$message.success('借用成功')
          } else if (this.title === '归还') {
            this.$message.success('归还成功')
          } else if (this.title === '维修') {
            this.$message.success('维修成功')
          } else if (this.title === '报废') {
            this.$message.success('报废成功')
          } else if (this.title === '待报废') {
            this.$message.success('待报废成功')
          }
          this.$router.go(-1)
        }
        this.cancel()
        // this.$emit('handleAdd')
      })
    },
  },
}
</script>
    <style scoped lang="scss">
.switch {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 20px;
}
.change-info {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}
#app.dark-theme {
  .table,
  .header-top,
  .header-bottom,
  .duty-item,
  .app-container {
    background: transparent !important;

    // border: .0625rem solid rgba(59, 139, 255, 0.4);
  }
  .duty-item {
    border: 1px solid #4b6eef !important;
  }
  .tags {
    .active {
      background-color: #132c5e !important;
    }
  }

  .dark-top {
    background: transparent !important;
  }
  .container {
    background: transparent !important;
  }
  footer {
    background: #0a183e !important;
  }
  .div-foot {
    background: transparent !important;
  }

  .c-box,
  .sp-flex {
    background: rgba(59, 139, 255, 0.1);
    color: #fff;
  }
  .el-input__inner {
    background: transparent !important;
  }
  .bottom-box {
    color: #fff;
    border: 0.0625rem solid #097597;
  }
  .box-one,
  .box-three-right {
    border-right: 0.0625rem solid #097597;
  }

  .box-his {
    background-color: transparent;
    .title-box {
      background-color: transparent;
      .icon {
        background: #d8d8d8;
      }
    }
  }
}
.dark-top {
  background-color: #eef0f5;
  overflow: auto;
}
.c-box {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
.container {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eef0f5;
  overflow: auto;
}

footer {
  position: fixed;
  bottom: 0;
  right: 20px;
  height: 70px;

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  z-index: 999;
  .div-foot {
    padding: 20px;
    height: 70px;
    line-height: 70px;
    width: 100%;
    // width: calc(100% - 240px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
  }
}

.tags {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .duty-item {
    margin-right: 20px;
    width: 240px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    cursor: pointer;
    &.active {
      background: #edf0fd;
      border: 1px solid rgba(75, 110, 239, 1);
    }
    img {
      width: 26px;
      margin-right: 10px;
      vertical-align: middle;
    }
    span {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
    }
  }
}
.sp-flex {
  align-items: stretch;
}
.left {
  display: flex;
  align-items: center;
  span {
    margin: 0 20px;
  }
  i {
    display: inline-block;
    height: 50%;
    width: 0;
    margin: 0 20px;
    background: #d8d8d8;
    border: 1px solid rgba(151, 151, 151, 1);
  }
}
.right {
  display: flex;
  align-items: center;
  .el-button {
    margin-left: 10px;
  }
}

.back {
  margin-bottom: 10px;
}
.img-box {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  img {
    width: 56px;
    height: 56px;
    margin: 0 auto !important;
  }
  > div {
    margin-top: 10px !important;
  }
}
.app-row {
  // flex: 1;
  // overflow: auto;
}

.box-his {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  .title-box {
    display: flex;
    width: 100%;
    background: #f5f7fe;
    border-left: 3px solid #4b6eef !important;
    margin-bottom: 20px;
    .icon {
      display: block;
      width: 5px;
      height: 5px;
      margin: 20px 0px;
      border-radius: 50%;
      background: #d8d8d8;
    }
  }
}
.times {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .el-empty {
    width: 100%;
  }
}
::v-deep {
  // 上传图片样式
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff !important;
  }
  .avatar-uploader-icon {
    font-size: 50px;
    color: #8c939d;
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
  }
  .avatar {
    width: 300px !important;
    height: 300px !important;
    display: inline-block;
  }
  .targetTable {
    // margin-top: -18px;
  }
  // 文本框高度
  .el-input--medium,
  .el-input__inner {
    height: 36px;
    line-height: 36px;
  }
  .switch {
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
  }
  // .el-form {
  //   flex: 1;
  //   overflow: auto;

  // }
  .el-form-item--medium,
  .el-form-item__content {
    line-height: 32px !important;
    height: 32px !important;
  }
  .wh-from {
    .el-form-item--medium,
    .el-form-item__content {
      line-height: 100% !important;
      height: 100% !important;
    }
  }

  // 面板箭头样式
  .el-collapse-item__arrow {
    margin-left: -23px;
    margin-bottom: 10px;
    color: #4b6eef;
  }
  .el-timeline {
    padding-left: 0px !important;
  }
  // 去掉折叠面板的边框线
  .el-collapse-item__wrap,
  .el-collapse-item__header {
    border-bottom: 0px solid #e6ebf5 !important;
  }
  .el-collapse-item__content {
    padding: 15px;
    padding-bottom: 0px;
  }
  .el-timeline-item {
    padding-bottom: 10px;
  }
}
.dark-theme {
  div,
  span,
  i {
    color: #ffffff !important;
  }

  .box-top,
  .box-content,
  .box-content1 {
    background-color: transparent !important;
  }
  .app-row {
    color: #fff !important;
    background-color: transparent;
  }
}
</style>
    <style media="print">
@page {
  size: auto;
}
@media print {
  @page {
    size: auto; /* auto is the initial value */
    margin: 3mm; /* this affects the margin in the printer settings */
  }

  .img-box {
    flex: 1;
    height: 160px !important;
    /* border: 1px solid rgba(0, 0, 0, 0.15); */
    border-radius: 4px;
    padding: 1rem;
    margin: 0 auto !important;
  }
  .img-box img,
  .img-box > div {
    margin: 0 auto !important;
    text-align: center;
  }
}
</style>

